<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>关系曲线图1</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style>
			.el-table--enable-row-hover .el-table__body tr:hover>td,
			.el-table__body tr.hover-row>td{background-color: white!important;}
		</style>
	</head>

	<body>
		<div id="app">
			<el-table :data="tableData3" :span-method="objectSpanMethod" height="500">
				<el-table-column label="" prop="keyname" width="40" fixed>
				</el-table-column>
				<el-table-column prop="date" label="" width="120" >
				</el-table-column>
				<el-table-column label="次分析维度2">
					<el-table-column v-for="(col,index) in cols" :key="col.id" :label="col.name">
							<template slot-scope="scope">
								<graph-component :row='scope.row.children[index]'></graph-component>
							</template>
					</el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<script>
			Vue.component('graph-component', {
				props:['row'],
				template: '<div :id="\'myChart\' + row.id" style="width:100%;height:300px"></div>',
				mounted:function() {
					let myChart = echarts.init(document.getElementById('myChart'+this.row.id));
					let option={
								title: {
										// text: '有功功率关系曲线图'
								},
								tooltip: {
										trigger: 'axis'
								},
								legend: {
										data:['330°-30°','30°-90°','90°-150°','150°-210°']
								},
								grid: {
										left: '13%',
										// right: '4%',
										//bottom: '3%',
										containLabel: true
								},
								toolbox: {
	//					        feature: {
	//					            saveAsImage: {}
	//					        }
								},
								xAxis: {
										type: 'category',
										name:'风速[m/s]',
										nameLocation:'center',
										nameGap:40,
										boundaryGap: false,
										data: ['0','5','10','15','20','25']
								},
								yAxis: {
										type: 'value',
										name:'有功功率[k值]',
										nameLocation:'center',
										nameGap:40,
										boundaryGap: false,
								},
								series:this.row.data
					}
					myChart.setOption(option)
				}
			})
			new Vue({
				el: '#app',
				data: function() {
					return {
						cols:[{
							id:1,name:'穿山 1#'
						},
						{
							id:2,name:'穿山 2#'
						}],
						tableData3: [{
							id:1,
							keyname: '次分析维度1',
							date: '2016-05-03',
							children:[
								{
									id:'a1',
									data:[
										{
											name:'330°-30°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[120, 132, 101, 134, 90, 230, 210]
										},
										{
											name:'30°-90°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[220, 182, 191, 234, 290, 330, 310]
										},
									],
								},
								{
									id:'a2',
									data:[
										{
											name:'330°-30°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[120, 132, 101, 134, 90, 230, 210]
										},
										{
											name:'30°-90°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[220, 182, 191, 234, 290, 330, 310]
										},
									],
								}
							]
						}, {
							id:2,
							keyname: '次分析维度1',
							date: '2016-05-03',
							children:[
								{
									id:'a3',
									data:[
										{
											name:'330°-30°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[120, 132, 101, 134, 90, 230, 210]
										},
										{
											name:'30°-90°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[220, 182, 191, 234, 290, 330, 310]
										},
									],
								},
								{
									id:'a4',
									data:[
										{
											name:'330°-30°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[120, 132, 101, 134, 90, 230, 210]
										},
										{
											name:'30°-90°',
											type:'line',
											stack: '总量',
											smooth: true,
											data:[220, 182, 191, 234, 290, 330, 310]
										},
									],
								}
							]
						}],
						spanArr: [],
						pos: '',
					}
				},
				mounted: function() {
					this.getSpanArr(this.tableData3);
				},
				methods: {
					getSpanArr(data) {
						for (var i = 0; i < data.length; i++) {
							if (i === 0) {
								this.spanArr.push(1)
								this.pos = 0
							} else {
								// 判断当前元素与上一个元素是否相同
								if (data[i].keyname === data[i - 1].keyname) {
									this.spanArr[this.pos] += 1
									this.spanArr.push(0)
								} else {
									this.spanArr.push(1)
									this.pos = i
								}
							}
						}
					},
					objectSpanMethod({
						row,
						column,
						rowIndex,
						columnIndex
					}) {
						if (columnIndex === 0) {
							const _row = this.spanArr[rowIndex];
							const _col = _row > 0 ? 1 : 0
							return {
								rowspan: _row,
								colspan: _col
							}
						}
					}
				}
			})
		</script>
	</body>

</html>
